<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import {
  getOccupancyRateApi,
  getRoomBedStatusApi,
  getDistributionApi,
} from "@/api/accommodationReport";

// 住宿率统计
const occupancyChartRef = ref();
const occupancyChart = ref();
const renderOccupancyChart = (data) => {
  if (!occupancyChart.value) occupancyChart.value = echarts.init(occupancyChartRef.value);
  const option = {
    title: { text: "当前住宿率", left: "center" },
    tooltip: { trigger: "item" },
    legend: { bottom: 10, left: "center" },
    series: [
      {
        name: "住宿率",
        type: "pie",
        radius: "60%",
        data,
        label: { formatter: "{b}: {c} ({d}%)" },
      },
    ],
  };
  occupancyChart.value.setOption(option);
};

// 房间/床位状态统计
const statusChartRef = ref();
const statusChart = ref();
const renderStatusChart = (data) => {
  if (!statusChart.value) statusChart.value = echarts.init(statusChartRef.value);
  const option = {
    title: { text: "房间/床位状态分布", left: "center" },
    tooltip: { trigger: "item" },
    legend: { bottom: 10, left: "center" },
    series: [
      {
        name: "状态",
        type: "pie",
        radius: "60%",
        data,
        label: { formatter: "{b}: {c} ({d}%)" },
      },
    ],
  };
  statusChart.value.setOption(option);
};

// 人员住宿分布
const distChartRef = ref();
const distChart = ref();
const renderDistChart = (data) => {
  if (!distChart.value) distChart.value = echarts.init(distChartRef.value);
  const option = {
    title: { text: "人员住宿分布", left: "center" },
    tooltip: { trigger: "item" },
    legend: { bottom: 10, left: "center" },
    series: [
      {
        name: "分布",
        type: "pie",
        radius: "60%",
        data,
        label: { formatter: "{b}: {c} ({d}%)" },
      },
    ],
  };
  distChart.value.setOption(option);
};

onMounted(async () => {
  // 住宿率
  const occRes = await getOccupancyRateApi();
  if (occRes.code) renderOccupancyChart(occRes.data);
  // 房间/床位状态
  const statusRes = await getRoomBedStatusApi();
  if (statusRes.code) renderStatusChart(statusRes.data);
  // 人员分布
  const distRes = await getDistributionApi();
  if (distRes.code) renderDistChart(distRes.data);
});
</script>

<template>
  <div>
    <h2>住宿统计报表</h2>
    <div style="display: flex; gap: 32px; flex-wrap: wrap;">
      <div style="flex:1; min-width: 400px; height: 400px;">
        <div ref="occupancyChartRef" style="width: 100%; height: 100%"></div>
      </div>
      <div style="flex:1; min-width: 400px; height: 400px;">
        <div ref="statusChartRef" style="width: 100%; height: 100%"></div>
      </div>
      <div style="flex:1; min-width: 400px; height: 400px;">
        <div ref="distChartRef" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
h2 {
  margin-bottom: 24px;
}
</style> 